<template>
	<u-popup :show="show" mode="bottom" :round="10" :closeable="true" :safeAreaInsetBottom="false" @close="show = false">
		<view class="cont-bosf">
			<view class="product">
				<image mode="aspectFill" :src="proInfo.image"></image>
				<view>
					<view class="names">{{ proInfo.name }}</view>
					<view class="des">
						<text>{{ proInfo.describe }}</text>
					</view>
					<view class="btns">
						<view class="prices">
							<text>¥</text>{{ proInfo.shopPrice || 0 }}
						</view>
						<text>￥{{proInfo.marketPrice || 0}}</text>
					</view>
				</view>
			</view>
			<view class="rules" v-if="proInfo.attrs && proInfo.attrs.length">
				<view class="titls">规格</view>
				<view class="rule-list">
					<view v-for="(it, ix) in proInfo.attrs" :key="ix"
					 :class="{'act': formInfo.product_attr_id == it.id}"
					 @click="checkRule(it)">
						<text>{{ it.name }}</text>
					</view>
				</view>
			</view>
			<view class="nums">
				<view class="titls">选数量</view>
				<view class="actions">
					<text @click="action('can')">-</text>
					<input v-model="formInfo.number" @change="changeNum"/>
					<text @click="action('add')">+</text>
				</view>
			</view>
			<view class="btn-row" hover-class="hover_class" @click="submits">确 定</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		updateCart
	} from '@/utils/api/home.js'
	export default {
		data() {
			return {
				show: false,
				formInfo: {
					number: 1,
					product_attr_id: ''
				},
				proInfo: {},
				ruleList: []
			}
		},
		methods: {
			// 提交
			submits() {
				uni.showLoading({
					title: '添加中'
				})
				updateCart({
					...this.formInfo,
					product_id: this.proInfo.id,
				}).then((res) => {
					this.show = false
					this.$emit('update')
					setTimeout(() => {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
					},300)
				}).catch(() => {
					uni.hideLoading()
				})
			},
			checkRule(it, index) {
				this.formInfo.product_attr_id = it.id
				this.proInfo.shopPrice = it.shop_price
			},
			openPop(proInfo) {
				this.formInfo.product_attr_id = ''
				this.proInfo = JSON.parse(JSON.stringify(proInfo))
				this.proInfo.attrs = this.proInfo.attrs || this.proInfo.attr
				if(!proInfo.image && proInfo.images.length) {
					this.proInfo.image = proInfo.images[0].image
				}
				this.formInfo.number = Number(this.proInfo.minBynum) || 1
				this.show = true
			},
			changeNum() {
				let min = Number(this.proInfo.minBynum)
				if(min && this.formInfo.number<=min) {
					this.formInfo.number = this.proInfo.minBynum
					uni.showToast({
						title: '此产品最低购买数量' + this.proInfo.minBynum,
						icon: 'none'
					})
				}
				let max = Number(this.proInfo.maxBynum)
				if(max && this.formInfo.number >= max) {
					this.formInfo.number = this.proInfo.maxBynum
					return uni.showToast({
						title: '此产品限制购买数量' + this.proInfo.maxBynum,
						icon: 'none'
					})
				}
			},
			action(type) {
				if(type === 'can') {
					let min = Number(this.proInfo.minBynum)
					if(min && this.formInfo.number<= min) {
						return uni.showToast({
							title: '此产品最低购买数量' + this.proInfo.minBynum,
							icon: 'none'
						})
					}
					if(this.formInfo.number === 1) return
					this.formInfo.number --
				}  else {
					let max = Number(this.proInfo.maxBynum)
					if(max && this.formInfo.number >= max) {
						return uni.showToast({
							title: '此产品限制购买数量' + this.proInfo.maxBynum,
							icon: 'none'
						})
					}
					this.formInfo.number ++
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.btn-row {
	width: 100%;
	height: 81upx;
	background-color: #FE3629;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32upx;
	border-radius: 50upx;
	color: #FFFFFF;
	margin-top: 100upx;
}
.nums {
	margin-top: 44upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.actions {
		display: flex;
		align-items: center;
		border: 1px solid #C0C0C0;
		border-radius: 10upx;
		overflow: hidden;
		height: 51upx;
		>text {
			display: inline-block;
			width: 55upx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			font-size: 36upx;
			color: #000000;
			font-weight: bold;
		}
		>text:nth-of-type(1) {
			color: #969696 !important;
		}
		input {
			width: 63upx;
			height: 100%;
			font-size: 24upx;
			color: #000000;
			text-align: center;
			background: transparent;
			border-left: 1px solid #E9E9E9;
			border-right: 1px solid #E9E9E9;
		}
	}
}
.titls {
	font-size: 30upx;
	color: #000000;
	font-weight: 500;
}
.rule-list {
	.act {
		background-color: #0B59E1 !important;
		text, view {
			color: #fff !important;
		}
	}
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	>view {
		height: 67upx;
		background-color: #F6F7F9;
		display: flex;
		border-radius: 12upx;
		align-items: center;
		margin-top: 27upx;
		box-sizing: border-box;
		padding: 0 24upx 0 28upx;
		margin-right: 16upx;
		justify-content: space-between;
		>text {
			font-size: 24upx;
			color: #000000;
			white-space: nowrap; //禁止换行
			overflow: hidden;
			text-overflow: ellipsis;
		}
		>view {
			font-size: 24upx;
			color: #9E9E9E;
		}
	}
}
.cont-bosf {
	box-sizing: border-box;
	padding: 32upx;
	.product {
		display: flex;
		margin-bottom: 56upx;
		>image {
			width: 190upx;
			height: 190upx;
			border-radius: 10upx;
			flex-shrink: 0;
			background-color: #F0F0F0;
			margin-right: 37upx;
		}
		>view {
			flex: 1;
			min-width: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.names {
				font-size: 30upx;
				color: #000000;
				line-height: 40upx;
				font-weight: 500;
				display: inline-block;
				margin-top: 10upx;
				padding-right: 80upx;
				 display: -webkit-box;
				  -webkit-box-orient: vertical;
				  -webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
				  overflow: hidden;
				  text-overflow: ellipsis;
			}
			.des {
				font-size: 26upx;
				color: #969696;
				display: inline-block;
				white-space: nowrap; //禁止换行
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.btns {
				display: flex;
				align-items: center;
				>.hot {
					width: 120upx;
					height: 40upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24upx;
					background: #EA5312;
					border-radius: 8upx;
					color: #FFFFFF;
					margin-right: 12upx;
				}
				>.prices {
					font-size: 36upx;
					font-weight: 500;
					color: #FE3629;
					>text {
						font-size: 24upx;
					}
				}
				>text {
					font-size: 26upx;
					color: #FE3629;
					text-decoration-line: line-through;
					margin-left: 16upx;
				}
			}
		}
	}
}
</style>